<template>
  <div class='box'>
    <div class="body">
     <commonHeaderVue type="基础" @getNewList="getNewList" @removeForm="removeForm" />
     <headerVue :title="titlte"  />
          <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        >
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        >
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录">
      </el-table-column>
           <el-table-column
        prop="questionType"
        label="题型">
      </el-table-column>
           <el-table-column
        prop="question"
        label="题干">
      </el-table-column>
                <el-table-column
        prop="addDate"
        label="录入时间">
      </el-table-column>
                <el-table-column
        prop="difficulty"
        label="难度">
      </el-table-column>
        <el-table-column
        prop="creator"
        label="录入人">
      </el-table-column>
            <el-table-column label="操作"  width="180">
            <template #default="{ row }">
              <operateVue :row="row" @editNews="editQuestion"  @deleteNews="deleteQuestion" @readerNews="readerQuestion" @changeType="changeType" :show="true" />
            </template>
          </el-table-column>

    </el-table>
  <pageToolVue :total="titlte" :paginationPage="pageObj.page" :paginationPagesize="pageObj.pagesize" @pageChange="pageChange" @changSize="onPageSizeChange" />
        <previewVue ref="view" :renderObj="renderObj" />
    </div>

  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
import headerVue from '../../module-manage/components/header.vue'
import commonHeaderVue from '../components/commonHeader.vue'
import operateVue from '../components/operate.vue'
import pageToolVue from '@/module-manage/components/page-tool'
import previewVue from '../components/preview.vue'
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    commonHeaderVue, headerVue, operateVue, pageToolVue, previewVue
  },
  data () {
    return {
      renderObj: {},
      pageObj: {
        page: 1,
        pagesize: 5
      },
      tableData: [],
      titlte: null
    }
  },
  created () {
    this.getRenderList(this.pageObj)
  },
  methods: {
    async getRenderList (obj) {
      const { data } = await list(obj)
      this.titlte = data.counts
      this.tableData = data.items
      this.tableData.forEach(item => {
        item.questionType = item.questionType === 1 ? '单选' : '多选'
        item.difficulty = item.difficulty === '1' ? '简单' : '困难'
        item.question = item.question.replace(/<.*?>/ig, '')
        item.addDate = parseTime(item.addDate)
      })
      // console.log(this.tableData)
    },
    getNewList (form) {
      this.getRenderList({ ...this.pageObj, ...form })
    },
    removeForm () {
      this.getRenderList(this.pageObj)
    },
    editQuestion (id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id
        }
      })
    },
    async deleteQuestion (id) {
      await remove({ id })
      this.getRenderList(this.pageObj)
    },
    async readerQuestion (id) {
      const { data } = await detail({ id })
      this.renderObj = { ...data }
      this.$refs.view.openDialog()
    },
    changeType (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '加入成功!'
        })
        this.getRenderList(this.pageObj)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    pageChange (val) {
      this.pageObj.page = val
      this.getRenderList(this.pageObj)
    },
    onPageSizeChange (val) {
      this.pageObj.pagesize = val
      this.getRenderList(this.pageObj)
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  padding: 20px;
}
.body {
  padding: 20px;
  background-color: #fff;
}

</style>
